<template>
  <div>
    <el-card class="login-card">
      <el-form>
        <el-form-item
          ><div style="text-align:center">
            <h3>红绿灯二手车欢迎你</h3>
          </div></el-form-item
        >
        <el-form-item label="用户名">
          <el-input v-model="model.name"> </el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="model.phone"> </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="model.pass"> </el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="checkPass"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            native-type="submit"
            round
            @click="registerNewUser"
            >注册</el-button
          >
          <div style="text-align:right" class="mr-2">
            <el-button type="warning" plain circle><router-link to="/home" tag="div">
            返回首页</router-link></el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style>
.login-card {
  width: 40rem;
  margin: 9rem auto;
}
</style>
<script>
export default {
  data() {
    return {
      model: {
        pass: "",
      },
      checkPass: null,
    };
  },

  methods: {
    async registerNewUser() {
      if (this.model.pass === this.checkPass) {
        const returnData = await this.$http
          .post("/register", this.model)
          .then(() => {
            this.$router.push("/login");
          })
          .catch((err) => {
            console.group("register");
            console.group(err);
            console.groupEnd();
            this.model = {
              pass: "",
            };
          });
        console.log(returnData);
      } else {
        this.checkPass = null;
        this.$message({
          message: "两次密码不一致",
          type: "error",
        });
      }
    },
  },
};
</script>
